<template>
  <div class="submit-page">
    <!-- 主表单区域 -->
    <Form style="margin-top: 20px;" ref="form">
      <CellGroup inset>
        <Field name="cardProductName" label="卡种"
          input-align="right" readonly
          :model-value="stateCardInfo.data.cardProductName" />
      </CellGroup>
      <CellGroup inset>
        <Tabs
          v-model:active="cardConfig.submitType">
          <Tab title="单卡提交" :name="1" />
          <Tab title="批量提交" :name="2" />
        </Tabs>
      </CellGroup>
      <Divider />
      <template
        v-if="cardConfig.submitType === CardSubmitType.Single">
        <CellGroup inset>
          <Field v-model="cardConfig.faceValue"
            is-link readonly clickable
            name="faceValue" label="面值"
            placeholder="请选择面值"
            :rules="[{ required: true, message: '请选择面值' }]"
            @click="handleShowModal">
            <template #right-icon>
              <Tag type="primary">元</Tag>
            </template>
          </Field>

          <Field v-model="cardConfig.cardNumber"
            v-if="
              cardConfig.formType === CardFormType.CardNumberAndPassword
              || cardConfig.formType === CardFormType.CardNumber
            " name="cardNumber" label="卡号"
            placeholder="请输入卡号" autocomplete="off"
            :rules="[{ required: true, message: '请输入卡号' }]" />

          <Field v-model="cardConfig.cardPassword"
            v-if="
              cardConfig.formType === CardFormType.CardNumberAndPassword
              || cardConfig.formType === CardFormType.Password
            " name="cardPassword" label="卡密"
            autocomplete="off" placeholder="请输入卡密"
            :rules="[{ required: true, message: '请输入卡密' }]" />
        </CellGroup>
      </template>
      <!-- 批量提交区域 -->
      <template
        v-if="cardConfig.submitType === CardSubmitType.Multiple">
        <CellGroup inset>
          <Field v-model="cardConfig.faceValue"
            is-link readonly clickable
            name="faceValue" label="面值"
            placeholder="请选择面值"
            :rules="[{ required: true, message: '请选择面值' }]"
            @click="handleShowModal">
            <template #right-icon>
              <Tag type="primary">元</Tag>
            </template>
          </Field>
          <Field label="卡券数量" is-link readonly
            :model-value="cardConfig.batch.cardInfoList.length" />
          <Field v-model="cardConfig.cardInfoList"
            name="batchCards" label="批量数据"
            type="textarea" rows="7"
            :placeholder="`每行格式：\n卡号 卡密：\n1234 5678\nabcd efgh\n只要卡密：\n1234\n5678`"
            :rules="[{ required: true, message: '请输入卡号卡密' }]" />
        </CellGroup>
      </template>
      <template
        v-if="cardConfig.submitType === CardSubmitType.Empty">
        <Empty description="此卡维护中" />
      </template>
    </Form>
    <Divider />
    <!-- 提交按钮 -->
    <Button round type="primary" size="normal"
      style="width: 80%; margin-left: 10%;"
      @click="handleSubmit" :loading="loading">
      立即提交
    </Button>
    <Divider />
    <HelpTab />
    <NoticeSection
      style="flex-grow: 1; margin-bottom: 20px;" />
  </div>
  <Modals />
</template>

<script setup lang="ts">
import {
  Button,
  CellGroup, Divider, Empty, Field, Form, showConfirmDialog, showFailToast,
  Tab, Tabs, Tag,
} from 'vant';
import { onMounted } from 'vue';
import { useRoute } from 'vue-router';

import usePlatformStore from '@/stores/platform.store';

import Modals, { ModalFaceValueList } from '../components';
import HelpTab from '../components/HelpTab.vue';
import NoticeSection from '../components/NoticeSection.vue';
import { CardFormType, CardSubmitType } from '../const';
import useCardConfig from '../hooks/useCardConfig';
import useCardInfo from '../hooks/useCardInfo';
import type { CardFaceItem } from '../models/CardInstance';

const route = useRoute();
const { state: stateCardInfo, faceValueList, fetchData: fetchCardInfo } = useCardInfo();
const {
  loading, cardConfig, form, handleAdd,
} = useCardConfig();
const platformStore = usePlatformStore();

const handleShowModal = () => {
  ModalFaceValueList.show({
    title: '请选择面值',
    options: faceValueList.value,
    emit: (option: CardFaceItem) => {
      cardConfig.value.faceValue = option.faceValue;
    },
  });
};

const handleCardInit = () => {
  const { id } = route.params;
  cardConfig.value.productCode = +id;
  cardConfig.value.formType = stateCardInfo.value.data.formType;
  if (stateCardInfo.value.data.items.length
    && stateCardInfo.value.data.isMaintain
  ) {
    cardConfig.value.submitType = CardSubmitType.Empty;
    return;
  }
  if (!+cardConfig.value.faceValue) {
    handleShowModal();
  }
};

onMounted(async () => {
  const { id } = route.params;
  if (id) {
    await fetchCardInfo(`${id}`);
    handleCardInit();
  } else {
    showFailToast('参数丢失。。。');
  }
});

// 提交处理
const handleSubmit = async () => {
  await showConfirmDialog({
    title: '请确认信息',
    message: cardConfig.value.submitType === CardSubmitType.Single
      ? '提交后不可修改，请仔细核对！'
      : `当前批量提交卡券数量：${cardConfig.value.batch.cardInfoList.length}张，提交后不可修改，请仔细核对！`,
  }).then(async () => {
    if (platformStore.platformCardTpye) {
      cardConfig.value.cardPlatform = platformStore.platformCardTpye;
      handleAdd();
    } else {
      showFailToast('当前平台维护，请稍后重新刷新页面');
    }
  });
};

</script>
<style lang="less" scoped>
.submit-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 50px;
  width: 100%;
}
</style>
